<template>
  <el-container>
    <!-- 侧边树型 -->
    <el-aside class="aside-handle">
     <h2>字典分类目录</h2>
     <el-scrollbar class="scrollbar-handle"  :style="{ height: $store.getters.scrollerHeight(30) }" >
      <el-tree
        default-expand-all
        :expand-on-click-node="false"
        :data="headTreeList"
        @node-click="treeClick"
        ref="headTree"
        node-key="id"
        :render-content="renderContent"
      >
      </el-tree>
     </el-scrollbar>
    </el-aside>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        context-menu
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :proxy-config="tableProxy"
        tree-config
        pager-config
        :sort-config="{remote:true}"
      >
        <!-- 多条件查询 -->
        <template v-slot:toolbar_search>
          <el-tag type="warning" effect="dark">分类编码：{{B_ItemCode}}</el-tag>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-button round type="primary" icon="el-icon-plus" @click="handleAdd" v-permission-btn="'Detail_Add'">新增</el-button>
          <el-button round type="warning" icon="el-icon-edit" @click="handleEdit" v-permission-btn="'Detail_Edit'">编辑</el-button>
          <el-button round type="danger" icon="el-icon-delete" @click="handleDelete" v-permission-btn="'Detail_Delete'">删除</el-button>
          <el-divider direction="vertical"></el-divider>
        </template>
        <!-- 字典状态模板 -->
        <template v-slot:B_EnabledMark="{ row }">
          <vxe-switch v-model="row.B_EnabledMark" on-label="启用" :on-value="1" off-label="禁用" :off-value="0" @change="ChangeState(row)"></vxe-switch>
        </template>
      </vxe-grid>
    </el-main>
    <!-- 拟态窗口 -->
    <Form ref="mainForm" :itemId="B_ItemId" @refresh="$refs[`mainTable`].commitProxy(`reload`)" />
    <!-- 字典分类表单 -->
    <HeadForm ref="headForm" @refresh="initTree()" />
  </el-container>
</template>

<script> 
import { DataItem } from "@/api";
import Form from "./Form.vue";
import HeadForm from "./HeadForm.vue";
export default {
  components: { Form, HeadForm },
  data() {
    return {
      /* vxe-grid */
      queryEntity: {}, //查询实体
      //工具栏配置
      tableToolbar: {
        refresh: true,
        zoom: true,
        custom: true,
        
      },
      //列配置
      tableColumn: [
        {
          field: "B_ItemName",
          title: "字典名",
          sortable: true,
          treeNode: true,
          align: "left",
        },
        { field: "B_ItemValue", title: "字典值", sortable: true },
        {
          field: "B_EnabledMark",
          title: "字典状态",
          sortable: true,
          slots: { default: "B_EnabledMark" },
        },
        {
          field: "B_CreateDate",
          title: "创建日期",
          sortable: true,
          formatter: ["toDateString", "yyyy-MM-dd"],
        },
        { field: "B_Description", title: "描述", sortable: true },
      ],
      //数据代理配置
      tableProxy: {
        seq: true, // 启用动态序号代理
        sort: true, // 启用排序代理
        autoLoad: false, //是否自动加载查询数据
        ajax: {
          // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）
          query: ({ page, sort, filters }) => {
            //选中了字典分类才可以查询
            if (this.util.validateNull(this.B_ItemId)) {
              this.$message.warning("请先选择相应字典分类！");
              return;
            }
            page.sidx = sort.property;
            page.sord = sort.order;
            return DataItem.GetDetailPageList({
              queryjson: JSON.stringify(Object.assign({ B_ItemId : this.B_ItemId }, this.queryEntity)),
              pagination: JSON.stringify(page),
            }).then((res) => {
              return res;
            });
          },
        },
      },
      /* 实体数据 */
      headTreeList: [], //字典分类树型数据
      B_ItemId: "", //选中的字典分类
      B_ItemCode: "", //选中的分类编码
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {

      this.initTree(); //初始化树型目录
    },
    //初始化树型目录
    initTree() {
      this.$store.commit("SET_ISLOADING",true);
      //获取字典分类树型数据
      DataItem.GetHeadTreeList().then((res) => {
        this.headTreeList = res;
        this.$store.commit("SET_ISLOADING",false);
      });
    },
    //树型目录单机回调
    treeClick(node, Node, selfCom) {
      this.B_ItemId = node.id; //存储选择节点
      this.B_ItemCode = node.icon; //存储选择节点
      this.$refs["mainTable"].commitProxy("reload"); // 刷新表格
    },
    //状态变更
    ChangeState(row) {
      DataItem.ChangeState({
        B_ItemDetailId: row.B_ItemDetailId,
        B_EnabledMark: row.B_EnabledMark,
      }).catch((err) => {
        //状态归位
        row.B_EnabledMark = !row.B_EnabledMark;
      });
    },
    //新增字典明细
    handleAdd() {
      //选中了字典分类才可以打开
      if (this.util.validateNull(this.B_ItemId)) {
        this.$message.warning("请先选择相应字典分类！");
        return;
      }
      this.$refs["mainForm"].formOpen();
    },
    //编辑字典明细
    handleEdit() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row);
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    //删除字典明细
    handleDelete() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
          .then(() => {
            DataItem.DeleteDetail(row).then((res) => {
              this.$refs["mainTable"].commitProxy("reload"); // 刷新表格
              //刷新缓存数据
              DataItem.GetTreeList("").then((res) => {
                this.$store.commit("SET_DATAITEMLIST", res);
              })
            });
          })
          .catch((e) => {});
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    /*************************************************************************************/
    //树型节点内容自定义
    renderContent(h, { node, data, store }) {
        return (
          <span style="flex: 1; display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
            <span>{node.label}</span>
            <span>
              <el-button type="text" on-click={ () => this.Head_Add(data) } v-permission-btn="Head_Add">追加</el-button>
              <el-button type="text" on-click={ () => this.Head_Edit(data) } v-permission-btn="Head_Edit">编辑</el-button>
              <el-button type="text" on-click={ () => this.Head_Delete(node, data) } v-permission-btn="Head_Delete">删除</el-button>
            </span>
          </span>);
    },
    //分类新增
    Head_Add(data) {
      let o = {
        B_ParentId : data.B_ItemId,
        B_SortCode : data.children ? data.children.length : 0
      }
      this.$refs["headForm"].formOpen(o);
    },
    //分类编辑
    Head_Edit(data) {
      this.$refs["headForm"].formOpen(data);
    },
    //分类删除
    Head_Delete(node,data) {
      this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
        .then(() => {
          DataItem.DeleteHead({ B_ItemId: node.key }).then((res) => {
            this.initTree(); //刷新树型目录
            //刷新缓存数据
            DataItem.GetTreeList("").then((res) => {
              this.$store.commit("SET_DATAITEMLIST", res);
            })
          });
        })
        .catch((e) => {});
    },
  },

};
</script>